<template>
	<view class="home-container">
		<!-- 顶部搜索区域 -->
		<view class="search-container">
			<view class="search-box">
				<u-icon name="search" size="32rpx" color="#999" class="search-icon"></u-icon>
				<input class="search-input" placeholder="搜索" placeholder-style="color: #999" @input="onInput" @confirm="onSearch" />
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="content-area">
			<!-- 这里可以添加更多内容 -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: ''
			};
		},
		methods: {
			// 输入方法
			onInput(e) {
				this.searchValue = e.detail.value;
			},
			// 搜索方法
			onSearch() {
				console.log('执行搜索:', this.searchValue);
			}
		}
	}
</script>

<style lang="scss">
.home-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.search-container {
	padding: 20rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #e5e5e5;
}

.search-box {
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 25rpx;
	padding: 15rpx 20rpx;
	gap: 15rpx;
}

.search-icon {
	flex-shrink: 0;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	border: none;
	outline: none;
	background: transparent;
	height: 40rpx;
	line-height: 40rpx;
}

.search-input::placeholder {
	color: #999;
}

.content-area {
	padding: 20rpx;
	flex: 1;
}


</style>
